<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            border: 2px dotted blue;
        }
    </style>
</head>

<body>
    <button>获取地理位置信息</button>
    <div></div>
    <script>
        // 地理位置定位,必须 用户允许才可以,因为涉及到隐私问题。
        // 目前google不能用
        var oBtn = document.querySelector('button');
        var oDiv = document.querySelector('div');

        //给按钮绑定点击事件
        oBtn.onclick = function () {
            //获取地理位置的函数
            //三个参数 1:成功的回调函数，2：失败的回调函数，3，配置项json
            navigator.geolocation.getCurrentPosition((res) => {//成功
                console.log(res);//coords
                var data = res.coords;
                var str = `纬度：${data.latitude} | 经度：${data.longitude} | 时间： ${res.timestamp}`;
                oDiv.innerHTML = str;

            }, (err) => {//失败
                //用户不允许
                //超时 
                console.log(err);
            }, {//配置
                enableHighAccuracy: false,//是否是高精度, true 高精度  false 不是高精度
                timeout: 5000,//获取地理位置定位的超时时间
                maximumAge: 0 //浏览器重新获取地理位置定位的时长  ,多次获取地理位置定位
            });

        }

        /* accuracy: 93
              altitude: 0
              altitudeAccuracy: 0
              heading: null
              latitude: 22.603461829896354  纬度
              longitude: 113.8425452335563  经度
              speed: null */
    </script>
</body>

</html>